<template>
	<view class="content">
		<u-navbar title="购物车" :placeholder='true' left-icon=" " height="88rpx" leftIconColor="#fff"
			titleStyle='color:#fff;font-size:32rpx' left-icon-size="32rpx" bg-color="#FF594D" :autoBack="false">
		</u-navbar>

		<view class="merit">
			<!-- <view class="merit_item">全场优惠券抵扣</view> -->
			<view class="merit_item">7天无忧快速退货</view>
			<!-- <view class="merit_item">满40元免邮费</view> -->
		</view>

		<view class="shop_list">
			<u-checkbox-group shape="circle" inactiveColor="#fff" activeColor="#ff594d" v-model="shopCheckValue"
				placement="column" @change="checkboxChange">
				<template v-for="item in shopCarList">
					<view class="shop_item">
						<view class="goods_check">
							<image class="check_bg" src="../../static/images/shop-car/单选@2x.png" mode=""></image>
							<u-checkbox size="38rpx" :checked="item.check" :name="item.id">
							</u-checkbox>
						</view>
						<shopcar-goods :item='item'></shopcar-goods>
						<view class="numbox" v-if="!toggleValue">
							<u-number-box :disabledInput='true' min="0" buttonSize='60rpx' bgColor='#fff' :name='item.id'
								:value="item.specificationNumber" @change="valChange"></u-number-box>
						</view>
					</view>
				</template>
			</u-checkbox-group>
		</view>
		<view class="operation" v-if="toggleValue">
			<view class="operation_left">
				<view class="check_all">
					<u-checkbox-group shape="circle" inactiveColor="#fff" activeColor="#ff594d" v-model="checkboxValue1"
						placement="column" @change="checkboxAll">
						<view class="check_all_button">
							<image class="check_bg" src="../../static/images/shop-car/单选@2x.png" mode=""></image>
							<u-checkbox size="38rpx" name="checkall"></u-checkbox>
						</view>
					</u-checkbox-group>
					<view class="all_num">
						全选（{{shopCarCheck.length}}）
					</view>
				</view>
				<view class="total_price">￥{{totalPrice.toFixed(2)}}</view>
			</view>
			<view class="operation_right">
				<button class="left_button" @click="compile">编辑</button>
				<button class="right_button" @click="userPlaceAnOrder">下单</button>
			</view>
		</view>
		<view class="operation" v-else>
			<view class="operation_left updata">
				<view class="check_all">
					<u-checkbox-group shape="circle" inactiveColor="#fff" activeColor="#ff594d" v-model="checkboxValue1"
						placement="column" @change="checkboxAll">
						<view class="check_all_button">
							<image class="check_bg" src="../../static/images/shop-car/单选@2x.png" mode=""></image>
							<u-checkbox size="38rpx" name="checkall"></u-checkbox>
						</view>
					</u-checkbox-group>
					<view class="all_num">
						全选（{{shopCarCheck.length}}）
					</view>
				</view>
			</view>
			<view class="operation_right">
				<button class="left_button" @click="perform">完成</button>
				<button class="right_button" @click="delShop">删除</button>
			</view>
		</view>
		<tab-bar></tab-bar>
	</view>
</template>

<script>
	import {
		getCart,
		addCart,
		reduceCart
	} from '../../api/shopCar.js'
	export default {
		onShow() {
			this.$store.commit('setCouponId', 0)
			this.$store.commit('setAddressId', 0)
			if (!this.$store.getters.getIsLogin) {
				uni.navigateTo({
					url: '/pages_mine/pages/login/login'
				})
				return
			}
			this.getCartData()
		},
		data() {
			return {
				titleStyle: {
					color: '#fff',
				},
				checkboxValue1: [],
				shopCheckValue: [],
				// 基本案列数据
				checkboxList1: [{
					name: '',
					disabled: false
				}],
				toggleValue: true,
				shopCarList: [],
				value: 0,
				upadata: false,
				shopCarCheck: [],
				totalPrice: 0
			}
		},
		computed: {

		},
		watch: {
			shopCarCheck: {
				deep: true,
				handler() {
					console.log('wach');
					if (this.shopCarCheck[0]) {
						this.totalPrice = this.shopCarCheck.reduce((sum, item) => {
							return sum += (item.specificationNumber * item.specificationAmount)
						}, 0)
						return
					}
					this.totalPrice = 0
				}
			}
		},
		created() {
			this.getCartData()
		},
		onShow() {
			uni.hideTabBar()
		},
		methods: {
			async getCartData() {
				const res = await getCart()
				console.log(res);
				// this.shopCarCheck = []
				this.shopCheckValue = []
				this.shopCarList = res.rows
				if (this.checkboxValue1[0]) {
					this.shopCarList.forEach(item => {
						this.shopCheckValue.push(item.id)
					})
					const shops = this.shopCarList.filter((item, index) => {
						let goods = null
						this.shopCheckValue.forEach(id => {
							if (item.id == id) {
								goods = item
							}
						})
						return goods
					})
					this.shopCarCheck = shops
				}
				if (this.shopCheckValue[0]) {
					const shops = []
					this.shopCarList.forEach((item, index) => {
						this.shopCheckValue.forEach(check => {
							if (item.id == check) {
								shops.push(item)
							}
						})
					})
					this.shopCarCheck = shops
				}
			},
			// 购物车选中
			checkboxChange(n) {
				console.log('change', n);
				if (n[0]) {
					const shops = []
					this.shopCarList.forEach((item, index) => {
						// console.log(item);
						// console.log(n[index]);
						n.forEach(check => {
							if (item.id == check) {
								shops.push(item)
							}
						})
					})
					this.shopCarCheck = shops
					console.log(this.shopCarCheck);
					if (this.shopCarCheck.length == this.shopCarList.length) {
						this.checkboxValue1 = ['checkall']
					} else {
						this.checkboxValue1 = ['']
					}
					return
				}
				this.checkboxValue1 = []
				this.shopCarCheck = []
				// this.shopCarCheck = []
			},
			// 全选
			checkboxAll(n) {
				if (n[0]) {
					this.shopCarList.forEach(item => {
						this.shopCheckValue.push(item.id)
					})
					const shops = this.shopCarList.filter((item, index) => {
						let goods = null
						this.shopCheckValue.forEach(id => {
							if (item.id == id) {
								goods = item
							}
						})
						return goods
					})
					this.shopCarCheck = shops
				} else {
					this.shopCheckValue = []
					this.shopCarCheck = []
				}
			},
			// 删除购物车
			async delShop() {
				this.shopCheckValue.forEach(name => {
					this.shopCarList.forEach(async item => {
						if (name == item.id) {
							for (let i = 1; i <= item.specificationNumber; i++) {
								const res = await reduceCart({
									id: item.id
								})
								// console.log(res);
							}
							this.getCartData()
							this.shopCarCheck = []
							this.shopCheckValue = []
							this.checkboxValue1 = []
						}
					})
				})
			},

			perform() {
				this.toggleValue = true

			},
			compile() {
				this.toggleValue = false
			},
			// 用户下单
			userPlaceAnOrder() {
				console.log(this.shopCarCheck);
				if (this.shopCarCheck.length <= 0) {
					uni.showToast({
						title: '请选择一项商品',
						icon: 'error'
					})
					return
				}
				this.$store.commit('setShopCarList', this.shopCarCheck)
				uni.navigateTo({
					url: "/pages_goods/shop-order/shop-order?shopCar=" + 1
				})
			},
			// 商品数量加减
			async valChange(e) {
				const shop = this.shopCarList.find(item => item.id == e.name)
				if (e.value > shop.specificationNumber) {
					const res = await addCart(shop)
				} else {
					const res = await reduceCart({
						id: shop.id
					})
				}
				this.getCartData()
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;
		padding-bottom: 320rpx;
		box-sizing: border-box;

		.merit {
			display: flex;
			padding: 20rpx 20rpx 30rpx;
			justify-content: space-between;

			.merit_item {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FF594D;
				text-align: center;
				padding-left: 12rpx;
				position: relative;

				&::before {
					content: "";
					position: absolute;
					width: 8rpx;
					height: 8rpx;
					background: #FF594D;
					border-radius: 200rpx;
					top: 50%;
					transform: translateY(-50%);
					left: 0;
				}
			}
		}


		.shop_list {
			.shop_item {
				position: relative;
				width: 750rpx;
				height: 240rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 20rpx 30rpx 20rpx 104rpx;
				margin-bottom: 20rpx;

				.numbox {
					background-color: #fff;
					position: absolute;
					right: 20rpx;
					bottom: 40rpx;
				}

				.goods_check {
					position: absolute;
					left: 30rpx;
					top: 98rpx;

					.check_bg {
						width: 44rpx;
						height: 44rpx;
						position: absolute;
						left: -5rpx;
						top: -5rpx;
					}
				}
			}
		}

		.operation {
			width: 750rpx;
			height: 140rpx;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0rpx;
			padding-bottom: 150rpx;
			// // #ifdef MP
			// bottom: 148rpx;
			// // #endif


			.operation_left {
				padding: 20rpx 0 0 30rpx;

				.check_all {
					display: flex;

					.check_all_button {
						position: relative;

						.check_bg {
							width: 44rpx;
							height: 44rpx;
							position: absolute;
							left: -5rpx;
							top: -5rpx;
						}
					}

					.all_num {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						color: #333332;
					}
				}

				.total_price {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #F44236;
					padding-left: 4rpx;
					padding-top: 15rpx;
					height: 45rpx;
					line-height: 45rpx;
				}

			}

			.updata {
				padding-top: 42rpx;
			}

			.operation_right {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 30rpx;

				button {
					width: 170rpx;
					height: 56rpx;
					background: #FFA242;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					border: 0;
					padding: 0;
					line-height: 56rpx;
					color: #FFFFFF;
					font-size: 26rpx;
				}

				.left_button {}

				.right_button {
					background: #FF594D;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>